<!-- 竞赛报名规则 --> 
<template>
    <div>
        <div v-if="indexKey === 1">
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
                <h1 class="condition-title" style="padding-bottom: 10px;">{{$t('competitionRegistrationRules.competitionRegistrationRules')}}</h1>
                <el-row style="padding:10px;" class="row-bg" justify="space-between">
                    <div>
                        <el-button type="primary" style="float:right; margin-left:10px;" @click="add">{{$t('competitionRegistrationRules.add')}}</el-button>
                    </div>
                </el-row>
                <edu-table :pagination="false" :selection='false' :order="false" :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini">
                    <!-- 规则名称 -->
                    <edu-table-column :label="$t('competitionRegistrationRules.ruleName')" prop="roleName"></edu-table-column> 
                    <!-- 启停用(0.停用 1.启用) -->
                    <edu-table-column :label="$t('competitionRegistrationRules.RuleEnabled')" prop="isEnabled">
                        <template slot-scope="scope">
                            <el-switch
                                @change="changeSwitch(scope.row)" 
                                :active-value='1'
                                :inactive-value='0'
                                v-model="scope.row.isEnabled"
                                active-color="#13ce66">
                            </el-switch>
                        </template>
                    </edu-table-column> 
                    <!-- 操作 -->
                    <edu-table-column :label="$t('competitionRegistrationRules.operation')">
                        <template slot-scope="scope">
                            <el-button type="text" @click="edit(scope.row)">{{ $t('competitionRegistrationRules.edit') }}</el-button>
                            <el-button type="text" @click="deleted(scope.row)">{{ $t('competitionRegistrationRules.deleted') }}</el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_"
                            style="float:right;margin-top:10px">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <!-- 竞赛报名规则(新增部分) -->
        <div v-if="indexKey === 2">
            <competition-Add
                :compile="compile"
                :title="title"
                :dataObjList="dataObjList"
                @change-exam="changeExam">
            </competition-Add>
        </div>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import competitionRuleApi from 'common/src/api/competitionRegistration/competitionRegistration'
import competitionRegistrationAdd from './competitionRegistrationRulesAdd'
export default {
    components: {
        'competition-Add' : competitionRegistrationAdd 
    },
    data() {
        return {
            id: '',
            total_: 0,
            queryForm: {
                pageNum_: 1, // 页码
                pageSize_: 20, // 每页大小
                condition: {} // 筛选条件
            },
            dataList: [
                {
                    roleName: '',
                    isEnabled: ''
                }
            ],
            indexKey: 1,
            compile: '',
            title: '',
            dataObjList: {}
        }
    },
    mounted() {
        this.getCompetitionRuleApi(this.queryForm)
    },
    methods: {
        getCompetitionRuleApi(data) {
            competitionRuleApi.getList(this.queryForm).then(res => {
                this.dataList = res.data.list
                this.total_ = res.data.total_
            })
        },
        // 启停用(0.停用 1.启用)
        changeSwitch(data) {
            if (data.isEnabled === 0) {
                let state = {
                    isEnabled : 0,
                    id : data.id
                }
                competitionRuleApi.openOrClose(state).then(res => {
                    if (res.code === 200) {
                        this.$message.success(this.$t('competitionRegistrationRules.stopService')) // 停用
                    }
                })
            } else if (data.isEnabled === 1) {
                let state = {
                    isEnabled: 1,
                    id: data.id
                }
                competitionRuleApi.openOrClose(state).then(res => {
                    if (res.code === 200) {
                        this.$message.success(this.$t('competitionRegistrationRules.enableService')) // 启用
                    }
                })
            }
        },
        // 新增
        add() {
            this.compile = 'add'
            this.title = this.$t('competitionRegistrationRules.addRule')
            this.indexKey = 2 
        },
        // 编辑
        edit(val) {
            competitionRuleApi.getRoleById(val.id).then(res => {
                if (res.code === 200) {
                    this.compile = 'edit'
                    this.title = this.$t('competitionRegistrationRules.editRule')
                    this.dataObjList = res.data
                    this.indexKey = 2
                }
            })
        },
        // 删除
        deleted(data) {
            this.$delConfirm(this.$t('competitionRegistrationRules.WannaDeleteSurely')).then(_ => {
                let param = {
                    id: data.id
                }
                competitionRuleApi.deleteRule(param).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('externamExchangeBase.operateSuccessfully')
                        })
                        this.getCompetitionRuleApi(this.queryForm)
                        this.queryForm.pageNum_ = 1
                    }
                })
            })
        },
        // 分页
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.getCompetitionRuleApi(this.queryForm)
        },
        // 分页
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getCompetitionRuleApi(this.queryForm)
        },
        // 返回列表主页
        changeExam() {
            this.indexKey = 1
            this.queryForm.pageNum_ = 1
            this.getCompetitionRuleApi(this.queryForm)
        }
    }
}
</script>

<style lang="scss" scoped>

</style>